<extend name="Public/base"/>

<block name="body">
    <div class="main-title">
        <h2>设置栏目【{$data['title']}】首推视频</h2>
    </div>
    <div class="tab-content">
    <form action="" method="post" class="form-horizontal">
        <table width="400">
            <tbody>
                <tr><td><label class="item-label">视频</label></td></tr>
                <tr>
                    <td>
                        <div class="select-default">
                            <label class="item-label">{$equ}</label>
                            <select size="8" class="select" id="select_video" multiple="multiple"> 
                                <volist name="videos" id="v">
                                    <option value="{$v.id}">{$v.full_title|default=$v['title']|htmlspecialchars_decode}</option>
                                </volist> 
                            </select> 
                        </div> 
                        <br>
                        <div class="handle-btn">
                            <input type="button" value="添加" title="add" class="add_em" /> 
                            <input type="button" value="删除" title="remove" class="remove_em" />
                        </div>
                    </td>
                    <td>
                        <div class="select-default">
                            <label class="item-label">添加的</label>
                                <select size="8" class="select" id="selected_video" name="videos[]" multiple="multiple">
                                    <notempty name="selectedViedo">
                                        <volist name="selectedViedo" id="video">
                                        <option value="{$video.id}" selected>{$video.full_title|default=$video['title']|htmlspecialchars_decode}</option>
                                        </volist>
                                    </notempty>
                                </select> 
                        </div> 
                        <br>
                        <div class="handle-btn">
                            <input type="button" value="置顶" title="first" class="JS_first" /> 
                            <input type="button" value="往上" title="up" class="JS_up" />
                            <input type="button" value="往下" title="down" class="JS_down" /> 
                            <input type="button" value="置底" title="last" class="JS_last" />
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <br><br>
        <div class="form-item">
            <button class="btn submit-btn ajax-post" onclick="do_submit();" id="submit" type="submit" target-form="form-horizontal">确 定</button>
            <!-- <button class="btn btn-return" onclick="javascript:history.back(-1);return false;">返 回</button> -->
        </div>
    </form>
    </div>
</block>

<block name="script">
    <script type="text/javascript">

        //确认提交前把selected框所有选中
        function do_submit(){
            $('#selected_video').find('option').prop('selected',true);
        }

        //对增加按钮进行事件绑定
        $('.add_em').click( function(){
            var optionType = "#select_video option:selected";
            var selectedType = "#selected_video";
            var selectVal = $("#select_video").val();
            if(selectVal){
                $(optionType).each( function(){
                    $(selectedType).append("<option selected value='"+$(this).val()+"'>"+$(this).text()+"</option");
                });
            }
        });

        //对移除按钮进行事件绑定
        $('.remove_em').click( function(){
            var optionType = "#selected_video option:selected";
            var selectVal = $("#selected_video").val();
            if(selectVal){
                $(optionType).each( function(){
                    $(this).remove();  
                });
            };
        });

        //置顶
        $('.JS_first').click(function(){
            var classType = "#selected_video";
            var optionType = "#selected_video option:selected";
            var selectVal = $(classType).val();
            if(selectVal){
                $(optionType).each( function(){
                    $(classType).prepend("<option selected value='"+$(this).val()+"'>"+$(this).text()+"</option");
                    $(this).remove();  
                });
            };
        });

        //往上
        $('.JS_up').click(function(){
            var optType = "#selected_video option";
            var optSelType = "#selected_video option:selected";
            var selectVal = $("#selected_video").val();
            if(selectVal){
                var index = $(optSelType).eq(0).index() - 1;
                index = index < 0 ? 0 : index;
                $(optSelType).each( function(){
                    $(optType).eq(index).before("<option selected value='"+$(this).val()+"'>"+$(this).text()+"</option");
                    $(this).remove();  
                });
            };
        });

        //往下
        $('.JS_down').click(function(){
            var optType = "#selected_video option";
            var optSelType = "#selected_video option:selected";
            var selectVal = $("#selected_video").val();
            if(selectVal){
                var index = $(optSelType).eq(0).index() + 1,
                    l = $(optType).length - 1;
                index = index > l ? l : index;
                $(optSelType).each( function(){
                    $(optType).eq(index).after("<option selected value='"+$(this).val()+"'>"+$(this).text()+"</option");
                    $(this).remove();  
                });
            };
        });

        //置底
        $('.JS_last').click(function(){
            var classType = "#selected_video";
            var optionType = "#selected_video option:selected";
            var selectVal = $("#selected_video").val();
            if(selectVal){
                $(optionType).each( function(){
                    $(classType).append("<option selected value='"+$(this).val()+"'>"+$(this).text()+"</option");
                    $(this).remove();  
                });
            };
        });

        //导航高亮
        highlight_subnav('{:U('index')}');
        showTab();

    </script>
</block>
